<template>
	<view class="content">
		<navView navTitle="开票情况" titleColor="#fff" :isBack="true"></navView>
		<view class="form-container">
			<!-- 发票类型 -->
			<view class="form-item">
				<text class="label">发票类型:</text>
				<uni-data-select style="width: 70%;" :clear="false" v-model="value"
					:localdata="range"></uni-data-select>
			</view>
			<!-- 抬头名称 -->
			<view class="form-item">
				<text class="label">抬头名称:</text>
				<input class="input" type="text" v-model="formData.title" @blur="saveFormData" placeholder="请输入抬头名称" />
			</view>

			<!-- 单位税号 -->
			<view class="form-item">
				<text class="label">单位税号:</text>
				<input class="input" type="text" v-model="formData.tax_number" @blur="saveFormData"
					placeholder="请输入单位税号" />
			</view>

			<!-- 注册地址 -->
			<view class="form-item" v-if="value == 0">
				<text class="label">注册地址:</text>
				<input class="input" type="text" v-model="formData.address" @blur="saveFormData"
					placeholder="请输入注册地址" />
			</view>

			<!-- 开户银行 -->
			<view class="form-item" v-if="value == 0">
				<text class="label">开户银行:</text>
				<input class="input" type="text" v-model="formData.bank_info" @blur="saveFormData"
					placeholder="请输入开户行号" />
			</view>

			<!-- 银行账户 -->
			<view class="form-item" v-if="value == 0">
				<text class="label">银行账户:</text>
				<input class="input" type="text" v-model="formData.bank_number" @blur="saveFormData"
					placeholder="请输入银行账户" />
			</view>

			<!-- 发票金额 -->
			<view class="form-item">
				<text class="label">发票金额:</text>
				<input class="input" type="number" v-model="formData.amount" @blur="saveFormData"
					placeholder="请输入发票金额" />
			</view>

			<!-- 备注 -->
			<view class="form-item" v-if="value == 0">
				<text class="label">税率:</text>
				<input class="input" type="text" v-model="formData.tax_rate" @blur="saveFormData" placeholder="请输入税率" />
			</view>

			<!-- 备注 -->
			<view class="form-item" v-if="value == 0">
				<text class="label">备注:</text>
				<input class="input" type="text" v-model="formData.remake" @blur="saveFormData" placeholder="请输入备注" />
			</view>

			<!-- 提交按钮 -->
			<button class="submit-btn" @click="handleSubmit">提交总经理审批</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				companyinfo: {}, // 公司信息
				userinfo: {}, // 用户信息
				formData: {
					relation_id : '', // 关联id
					invoice_type: 0, // 发票类型
					type: 0, // 发票类型
					title: '', // 抬头名称
					amount: 0.00, // 发票金额
					company_name: '', // 单位名称
					tax_number: '', // 纳税人识别号
					address: '', // 单位地址					
					bank_info: '', // 开户银行
					bank_number: '', // 银行账户
					contant: '', // 联系人
					tax_rate: '', // 税率
					remake: '' // 备注
				},
				value: 1,
				range: [{
						value: 0,
						text: "增值税专用发票"
					},
					{
						value: 1,
						text: "增值税普通发票"
					},
					// {
					// 	value: 2,
					// 	text: "电子普通发票"
					// }
				],
			};
		},
		onLoad(options){						
			this.id = options.id
			this.formData.relation_id = options.id	
			// 读取本地存储的表单数据
			const savedData = uni.getStorageSync('invoice_form_data')
			if (savedData) {
				this.formData = {
					...this.formData, // 默认值
					...savedData,    // 存储值
					relation_id: this.id // 保持当前ID
				}
			}
		},
		methods: {
			saveFormData() {
				uni.setStorageSync('invoice_form_data', this.formData)
			},
			handleSubmit() {
				console.log('表单数据:', this.formData);
				this.formData.invoice_type = this.value
				uni.setStorageSync('invoice_form_data', this.formData)
				this.$request('/addons/qingdong/invoice/applyInvoice', 'POST', this.formData).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 1200)
					}
				})
			}
			// getCompanyInfo() {
				// this.$request('/addons/qingdong/company/getLogingCompanyInfo', 'GET').then(res => {
				// 	this.formData.title = res.data.name
				// 	this.formData.company_name = res.data.name
				// 	this.formData.tax_number = res.data.taxid
				// 	this.formData.address = res.data.province + res.data.province + res.data.city + res.data.area + res.data.address
				// 	this.formData.bank_info = res.data.openingbank
				// 	this.formData.bank_number = res.data.accountnum
				// })
			// }
		}
	};
</script>

<style scoped lang="scss">
	.content {
		.form-container {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 0 20rpx;
		}

		.form-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #ccc;
		}

		.label {
			font-size: 32rpx;
			color: #333;
			width: 200rpx;
		}

		.radio-group {
			display: flex;
			flex-direction: column;
		}

		.radio-group label {
			margin-bottom: 10rpx;
		}

		.input {
			flex: 1;
			height: 80rpx;
			padding: 0 20rpx;
			font-size: 32rpx;
			border: none;
			text-align: right;
			border-radius: 10rpx;
		}

		.submit-btn {
			margin-top: 40rpx;
			width: 95%;
			background-color: #0081ff;
			color: white;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 32rpx;
			position: fixed;
			bottom: 30rpx;
		}

		::v-deep .uni-select {
			border: none;
		}
		::v-deep  .uni-select__input-text{
			text-align: right;
			padding-right: 30rpx;
		}
	}
</style>